<template>
  <KView class="sys-cell">
    <KView class="sys-cell-content" @click="cellClick">
      <KView class="sys-cell-title" :style="titleStyle" @click.stop>
        <slot name="title">
          <span>{{title}}</span>
        </slot>
      </KView>
      <KView class="sys-cell-input-div">
        <slot name="content">
          <KView v-if="placeholder!==''&&text===''" class="sys-cell-input-placeholder">{{placeholder}}</KView>
          <input v-if="type==='input'" v-model="text" class="sys-cell-input" :maxlength="maxlength" :type="inputType" @change="textChange" @input="textInput">
          <KView v-else-if="type==='text'" class="sys-cell-text">{{text}}</KView>
          <textarea v-else-if="type==='textarea'" v-model="text" class="sys-cell-textarea" :style="areaStyle" :maxlength="maxlength"
            :disable-default-padding="true" @change="textChange" @input="textareaInput"></textarea>
        </slot>
      </KView>
      <KView class="sys-cell-link flex-central" v-if="isLink">
        <sys-svg name="arrowRight" color="#d5d5d5"></sys-svg>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      value: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: ''
      },
      maxlength: {
        type: Number,
        default: -1
      },
      type: {
        type: String,
        default: 'input'
      },
      textareaHeight: Number,
      nowarp: {
        type: Boolean,
        default: false
      },
      inputType: {
        type: String,
        default: 'text'
      },
      titleWidth: [String, Number],
      isLink: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      titleStyle() {
        let titleWidth = this.titleWidth;
        if (titleWidth === undefined) {
          return {};
        }

        if (typeof titleWidth === 'number') {
          titleWidth = SystemUtil.formatPx(titleWidth);
        }
        return {
          width: titleWidth
        };
      },
      areaStyle() {
        let textareaHeight = this.textareaHeight;
        if (textareaHeight === undefined) {
          textareaHeight = 38;
        }
        textareaHeight = SystemUtil.formatPx(textareaHeight);
        return {
          height: textareaHeight
        };
      }
    },

    watch: {
      value() {
        if (this.inputText !== null) {
          this.inputText = null;
          return;
        }
        this.text = this.value;
      }
    },

    data() {
      return {
        text: this.value,
        inputText: null
      };
    },

    methods: {
      cellClick() {
        this.$emit('cell-click');
      },

      textChange() {
        let text = this.text;
        this.$emit('change', text);
      },

      textInput(){
        this.$emit('input', this.text);
      },

      textareaInput() {
        let text = this.text;
        if (this.nowarp) {
          this.text = text.replace(/\n/g, '');
        }
        this.inputText = text;
        this.$emit('input', text);
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .sys-cell {
    padding: formatPx(30) 0;
    font-size: formatPx(28);
    border-bottom: 1px solid #e9e9e9;

    >.sys-cell-content {
      display: flex;
    }

    .sys-cell-title {
      line-height: formatPx(48);
      height: formatPx(48);
    }

    .sys-cell-input-div {
      flex: 1;
      min-width: 0;
      position: relative;

      .sys-cell-input-placeholder {
        position: absolute;
        width: 100%;
        height: formatPx(48);
        line-height: formatPx(48);
        color: #999999;
        font-size: formatPx(28);
      }

      .sys-cell-input {
        display: block;
        width: 100%;
        height: formatPx(48);
        border: none;
        background: none;
        line-height: formatPx(48);
        font-size: formatPx(28);
      }

      .sys-cell-text {
        width: 100%;
        padding-top: formatPx(6);
        padding-bottom: formatPx(4);
        font-size: formatPx(28);
        line-height: 1.3;
      }

      .sys-cell-textarea {
        display: block;
        width: 100%;
        padding-top: formatPx(6);
        padding-bottom: formatPx(4);
        font-size: formatPx(28);
        line-height: 1.3;
        resize: none;
        border: none;
        background: none;
        font-weight: normal;
      }
    }

    .sys-cell-link {
      width: formatPx(30);
      margin-left: formatPx(10);

      .sys-svg {
        width: formatPx(30);
        height: formatPx(48);
      }
    }
  }

</style>
